<template>

	<view class="all">
		<view class="searchPP">
			<image @click="goBackM" style="width: 0.6rem; height: 1rem; padding: 0rem 0.5rem 0rem 0rem" src="../../style/image/cargo/leftarow.jpg"
			 alt="" />
			<view class="searchP">
				<view class="search" :style="{ width: '100%' }">
					<u-search placeholder="输入您需要购买的设备型号" shape="round" v-model="keyword" :show-action="false" @search="searchGoods"></u-search>
				</view>
			</view>

			<view @click="goShopCarM" class="slot-right" style="display: flex; justify-content: flex-end">
				<image style="width: 1rem;height:1rem; padding: 0.2rem" src="../../style/image/my/A39.png" alt="" />
				<view style="border-radius: 50%;
background-color: red;
width: 0.8rem;
height: 0.8rem;
color: white;
display: flex;
align-items: center;
justify-content: center;
">{{cornerMark}}</view>
			</view>
		</view>


		<view class="definite">
			<view class="definite-foot">
				<!-- <u-tabs-swiper
			  ref="tabs"
			  name="posName"
			  :list="posBrandList"
			  active-color="#4dbf92"
			  font-size="0.7rem"
			  count="count"
			  height="80"
			  :is-scroll="false"
			  :current="current"
			  bar-width="100"
			  gutter="80"
			  @change="tabsChange">
			  </u-tabs-swiper> -->

				<view style="background-color: white;margin-right: 0.2rem;" @click="priceSort">
					<view style="display: flex;align-items: center;padding: 0.2rem 0rem;">
						<view style="width:2rem">价格</view>
						<image v-if="isSortAsc" style="width: 0.6rem;height: 1.4rem;" src="../../style/image/order/sortTop.jpg" alt="">
							<image v-if="!isSortAsc" style="width: 0.6rem;height: 1.4rem;" src="../../style/image/order/sortBottom.jpg" alt="">
					</view>
				</view>
			</view>

			<view class="item" @click="particulars">
				<view class="item-one" v-for="(item,index) in posGoodsList" :key="index">
					<view style="height:9rem" @click="sureOrderM(item.reserve)">
						<image class="goods-image" :src="item.image" alt="">
					</view>

					<view style="background-color: white;border-bottom-left-radius: 0.5rem;border-bottom-right-radius: 0.5rem;padding: 0.3rem;">
						<view class="name">{{item.modelsName}}</view>
						<view class="num">销量{{item.posTypeSum}}</view>
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<span class="money">¥{{item.price}}</span>
							<image @click="addGoodsCar(item)" class="shoppingCart" src="../../style/image/my/A41.png" alt="">
								<!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
						</view>
					</view>
				</view>

				<view style="text-align: center;
display: flex;
justify-content: center;
width: 100%;
">
					<!-- <u-loadmore v-show="loadmoreModal" :status="loadStatus" :load-text="loadText"/> -->
					<uni-load-more @clickLoadMore="clickLoadMore" :content-text="contentText" :status="status"></uni-load-more>

				</view>

				<!-- <u-empty   style="margin-top:0rem;" v-if="posGoodsList.length==0" text="暂无数据" mode="data"></u-empty> -->

			</view>
		</view>
	</view>



</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		findPosBrand,
		findPosTypeForGoods,
		addCartGoods,
		findCartGoods,
		carQuantity
	} from "../../utils/uniApi";

	import uTabsSwiper from '../../uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue'

	import uSearch from '../../uview-ui/components/u-search/u-search.vue'

	import uniLoadMore from '../loadMore/uni-load-more.vue'

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			'u-tabs-swiper': uTabsSwiper,
			'u-search': uSearch,
			'uniLoadMore': uniLoadMore
		}
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;
		public current = 0;
		public keyword = "";
		public posBrandList = []; //设备品牌list
		public posGoodsList = []; //设备品牌下的商品价格list
		public sortString: any = 'priceAce'; //价格排序方式
		public posBrandString: any = ''; //查询的商品品牌
		public isSortAsc: boolean = true;
		public carGoodsNum: any = 0;
		// public value: any = 0; //步进器
		public pageN: any = 1; //分页的页数
		public cornerMark: any = 1; //角标
		//加载参数
		// public loadStatus = "nomore";
		// public loadText = {
		//   loadmore: "轻轻上拉",
		//   loading: "努力加载中",
		//   nomore: "暂无更多数据",
		// };
		// public loadmoreModal = true;
		public status = 'more'

		public contentText = {
			contentdown: '下拉或点击查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}

		public continueTypes = true;

		created() {}

		onShow() {
			this.findPosBrand();
			this.findCartGoods();
			this.mark()
		}

		onHide() {
			uni.hideLoading();
		}

		//下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "../../pages/buy/buy",
				});
				uni.stopPullDownRefresh();
			}, 1000);
		}

		//上拉加载更多
		onReachBottom() {
			if (!this.continueTypes) {
				return
			}

			this.pageN = this.pageN + 1;
			this.findPosTypeForGoods(this.posBrandString, this.sortString, this.pageN);
		}
		clickLoadMore() {
			this.onReachBottom()
		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
			//  uni.navigateTo({
			// url: './selectBusin'
			// });
		}
		//步进器
		// valChange(e) {
		// 	console.log('当前值为: ' + e.value)
		// }
		//tab栏品牌切换
		tabsChange(index: any) {
			this.current = index;
			if (index <= this.posBrandList.length) {
				var item: any = this.posBrandList[this.current]
				this.posBrandString = item.posName;
				this.pageN = 1;
				this.findPosTypeForGoods(this.posBrandString, this.sortString, this.pageN);
			}
		}

		//拉取我的设备品牌数据
		findPosBrand() {
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			findPosBrand(params).then((res: any) => {
				// console.log('++++++++++++++++++++我的设备商品品牌列表：' + JSON.stringify(res.data) )
				if (res.data.code == 200) {
					uni.hideLoading();
					this.posBrandList = res.data.data
					if (this.posBrandList.length > 0) {
						var item: any = this.posBrandList[0]
						this.posBrandString = item.posName;
						this.findPosTypeForGoods(this.posBrandString, this.sortString, this.pageN);
					}
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		}

		//拉取我的设备单价数据
		findPosTypeForGoods(name: any, sort: any, page: any) {
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				orderByType: sort, //priceAce价格正序 priceDesc价格倒序
				// posBrandName:name,
				pageNo: page,
				pageSize: 10,
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			findPosTypeForGoods(params).then((res: any) => {

				// console.log('++++++++++++++++++++我的设备商品品牌下的商品价格：' + JSON.stringify(res.data) )
				if (res.data.code == 200) {
					// if(this.posGoodsList.length>0){//搜索时 清除已有数据  有分页在考虑
					//  this.posGoodsList = []
					// }
					//   this.posGoodsList = res.data.data
					//   uni.hideLoading();

					var boolee = res.data.hasNext == false && this.continueTypes == false;
					if (res.data.hasNext == true) {
						this.status = "more";
					} else {
						this.status = "noMore";
					}
					console.log(res.data.hasNext, this.continueTypes, boolee);
					if (res.data.isFirst || !boolee) {

						if (res.data.hasNext == false) {
							this.continueTypes = false;
						}

						if (this.posGoodsList.length > 0 && this.pageN == 1) { //搜索  删除已有数据
							this.posGoodsList = [];
						}
						this.posGoodsList = this.posGoodsList.concat(res.data.data)
						// this.posGoodsList = res.data.data
						uni.hideLoading();
					}
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		}

		//拉取购物车的数据
		findCartGoods() {

			let params = {
				pageNo: 10,
				pageSize: 10,
				userId: uni.getStorageSync("userId") == "" ?
					"" : parseInt(uni.getStorageSync("userId")),
			};
			findCartGoods(params).then((res: any) => {
				console.log('++++++++++++++++++++购物车的数据列表：' + JSON.stringify(res.data))
				if (res.data.code == 200) {
					this.carGoodsNum = res.data.data.total;
					uni.hideLoading();
				} else {
					uni.hideLoading();
				}
			});
		}

		//搜索框
		searchGoods(value: any) {
			this.posBrandString = value;
			this.pageN = 1;
			this.findPosTypeForGoods(this.posBrandString, this.sortString, this.pageN);
		}
		//购物车按钮
		goShopCarM() {
			uni.navigateTo({
				url: './goodsCar'
			});
		}
		//返回按钮
		goBackM() {
			uni.navigateBack({
				delta: 1,
			});
		}
		//价格排序按钮
		priceSort() {
			this.isSortAsc = !this.isSortAsc;
			if (this.sortString == 'priceDesc') {
				this.sortString = 'priceAce'
			} else {
				this.sortString == 'priceDesc'
			}
			this.pageN = 1;
			this.findPosTypeForGoods(this.posBrandString, this.sortString, this.pageN);
		}
		//商品详情页
		sureOrderM(item: any) {
			// console.log(item,852369741)
			uni.navigateTo({
				url: './particulars?re=' + item
			})
		}
		//添加购物车
		addGoodsCar(item: any) {
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				posTypeId: item.id, //机型ID
				posTypePriceId: item.posTypePriceId, //机型价格ID
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			addCartGoods(params).then((res: any) => {
				// console.log(res,'+++++addCartGoods')
				if (res.data.code == 200) {
					this.findCartGoods();
					// this.carGoodsNum++
					uni.hideLoading();
					uni.showToast({
						title: '加购成功',
						icon: 'none',
						duration: 2000
					});
					this.mark()
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '加购失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		}
		//购物车角标
		mark() {
			uni.showLoading({
				title: '加载中'
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			carQuantity(params).then((res: any) => {
				// console.log(res,'+++++addCartGoods')
				if (res.data.code == 200) {
					console.log(res.data.data, '+++carqqqqq')
					this.cornerMark = res.data.data

				} else {

				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		height: 100%;
		background: #f3f5f7;
	}

	.definite {
		font-family: PingFang SC;
		background: #f3f5f7;
		height: 100%;
	}

	uni-page-body {
		height: 100%;
	}

	.item {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.item-one {
		// float: left;
		// position: relative;
		// background: #FFFFFF;
		// width: 8.5rem;
		// margin: 0.5rem 0.5rem 0.5rem 0.5rem;
		width: 50%;
		text-align: center;
		padding: 0.5rem;
	}

	.goods-image {
		width: 100%;
		height: 100%;
		border-radius: 0.4rem 0.4rem 0 0;
	}

	.name {
		text-align: left;
	}

	.num {
		font-size: 0.6rem;
		line-height: 1.5rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		text-align: left;
	}

	.money {
		font-size: 1rem;
		padding-left: 0.3rem;
		font-family: Myriad Pro;
		font-weight: 400;
		color: #FF0000;
	}

	.shoppingCart {
		width: 1.5rem;
		height: 1.5rem;
	}

	.searchPP {
		background-color: white;
		padding: 0.5rem;

		display: flex;
		align-items: center;
		border-bottom: 1px solid #e8e8e8;
	}

	.searchP {
		background-color: white;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.definite-foot {

		display: flex;
	}
</style>
